<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form class="form-horizontal" role="form" id="add_form">
    <div class="form-group">
      <label for="roleName" class="col-sm-2 control-label">角色名称</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" id="roleName" name="roleName" placeholder="请输入角色名字">
      </div>
    </div>
    <div class="form-group">
      <label for="menu" class="col-sm-2 control-label">权限</label>
      <div class="col-sm-5">
        <div class="zTreeDemoBackground left" id="menu">
          <ul id="treeDemo" class="ztree"></ul>
        </div>
      </div>
    </div>
</form>
</body>
</html>
<script>
  var setting = {
    check:{
      enable: true,
      autoCheckTrigger :true
    },
    async: {
      enable: true,
      url: "/menu/getZtreeMenu",
    },
    view : {
      addHoverDom: function(treeId, treeNode){
        var aObj = $("#" + treeNode.tId + "_a");
        if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
        var s = '<span id="btnGroup'+treeNode.tId+'">';
        if (treeNode.children == undefined) {
          s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteNode('+treeNode.id+')" href="#" >删除</a>';
          s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="editNode('+treeNode.id+')" href="#" title="修改权限信息">修改</a>';
          s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addNode('+treeNode.id+')" href="#" >添加</a>';
        }else{
          s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="editNode('+treeNode.id+')" href="#" title="修改权限信息">修改</a>';
          s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addNode('+treeNode.id+')" href="#" >添加</a>';
        }
        s += '</span>';
        aObj.after(s);
      },
      removeHoverDom: function(treeId, treeNode){
        $("#btnGroup"+treeNode.tId).remove();
      }
    }
  };

  $(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting);
  });
</script>